<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>麦知网——学问有余，可为人师</title>

<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../css/non-responsive.css" rel="stylesheet">
<link href="../../css/font-awesome.min.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
<link href="../../css/rewards.css" rel="stylesheet">    

	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="../../js/jquery.min.js"></script>
	<script src="../../js/logout.js"></script>
	<script src="../../js/logout.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="../../js/bootstrap.js"></script>
	
	<script type="text/javascript">
	//左侧根据大分类查找悬赏 每个分类用js加上不同的背景颜色
		$(function(){
			array=[];
			//给每个大分类确定一个颜色， PUSH进ARRAY（有几个大分类就PUSH几个颜色）
			array.push("186,85,211");
			array.push("138,43,226");
			array.push("95,158,160");
			array.push("0,191,255");
			array.push("174,238,238");
			array.push("142,229,238");
			array.push("0,134,139");
			array.push("69,139,116");
			array.push("155,205,155");
			array.push("78,238,148");
			array.push("84,139,84");
			array.push("0,238,0");
			array.push("69,139,0");
			array.push("205,198,115");
			array.push("139,129,76");
			array.push("205,205,0");
			array.push("238,180,180");
			array.push("139,58,58");
			array.push("139,35,35");
			array.push("147,112,219");
			array.push("139,121,94");
			array.push("255,52,179");
			array.push("71,60,139");
			array.push("0,0,139");
			//有几个大分类就循环几次
			for(i=1;i<=24;i++){
				$("#a_type"+i).css("background-color","rgb("+array[i-1]+")");
			}
			
		})

//改变排序 （按时间 按人气 按价格由高到低 按价格由低到高）
		function changeOrder(typeid)
		{
			if(typeid){
				var sel=$("#sel").val();
				window.location.href="/rewards/rewards/?order="+sel+"&typeid="+typeid;
				
			}else{
				var typeid=$("#typeid").val();
				var sel=$("#sel").val();
				if(typeid){
					window.location.href="/rewards/rewards/?order="+sel+"&typeid="+typeid;
				}else{
					window.location.href="/rewards/rewards/?order="+sel;
				}
				
			}
		}

//换页
		function pageChange(page){
			var typeid=$("#typeid").val();
			alert(typeid);
			if(typeid){
				var sel=$("#sel").val();
				window.location.href="?page="+page+"&typeid="+typeid+"&order="+sel;
			}
		}

//鼠标移动到左侧大分类上 特效
		function bigger(type_id) {
			$("#a_type"+type_id).css('padding','1px 15px 1px 15px');
		}
//鼠标离开左侧大分类 特效消失
		function smaller(type_id) {
			$("#a_type"+type_id).css('padding','1px 10px 1px 10px');
		}
		
	</script>
</head>
<body>
	{% include 'public/common/header.html' %}
<div class="container" style="margin-top:45px">
	<div class="row">
<!-- 左侧div -->
		<div class="col-xs-4">
			<div>
				<a href="{% url 'rewards:rewardcreate' %}"><b><i class="icon-bullhorn"></i> 发布我的需求</b></a>
			</div>
			<div class="rewards_types">
				<div style="font-size:13px;color:#666666;"><b>#按分类检索</b></div>
				<div>
<!-- 一个分类  循环开始处   div的id是大分类的id  需要确保id是连续的 -->
					{% for t in types %}
					<div id="a_type{{t.id}}" class="pull-left rewards_a_type">
						<a href="javascript:void(0)" onmouseover="bigger({{t.id}});" onmouseout="smaller({{t.id}});" onclick="changeOrder({{t.id}});" style="color:#ffffff;">{{t.name}}</a>
					</div>
					{% endfor %}
<!-- 一个分类  循环结束处 -->
					<div id="a_typeall" class="pull-left rewards_type_other">
						<a href="/rewards/rewards/" style="font-size:13px;"><b>全部</b></a>
					</div>
					<div class="clearfix"></div>
					<!--<div class="rewards_type_other"><a href="/rewards/rewards/"><b>全部</b></a></div>-->
				</div>
			</div>
			<div class="rewards_interest">
				<div style="font-size:13px;color:#666666;padding-bottom:10px;"><b>#最热悬赏</b></div>
				<div>
<!-- 您可能感兴趣的其他悬赏   一条 循环开始处 -->{% for h in hotRewardTable %}
					<div class="rewards_a_interest">
						<div class="rewards_inter_name pull-left">
							<a href="{% url 'rewards:thereward' h.id %}" title="{{h.name}}">{{h.name}}</a>
						</div>
						<div class="pull-right">
							￥{{h.price}}
						</div>
						<div class="clearfix"></div>
					</div>
<!-- 您可能感兴趣的其他悬赏   一条 循环结束处 -->{% endfor %}
				</div>
			</div>
		</div>
<!-- 右侧div -->
		<div class="col-xs-8">
			<div class="rewards_sel">
				<select id="sel" onchange="changeOrder();">
					<option value="1">按时间排列</option>
					{% ifequal order 2 %}
					<option value="2" selected>按人气排列</option>
					{% else %}
					<option value="2">按人气排列</option>
					{% endifequal %}
					{% ifequal order 3 %}
					<option value="3" selected>按价格由高到低排列</option>
					{% else %}
					<option value="3">按价格由高到低排列</option>
					{% endifequal %}
					{% ifequal order 4 %}
					<option value="4" selected>按价格由低到高排列</option>
					{% else %}
					<option value="4">按价格由低到高排列</option>
					{% endifequal %}
				</select>
			</div>
			<div class="all_rewards" id="all_rewards">
<!-- 一个悬赏 循环开始处 -->		{% for r in rewards %}								
				<div class="a_reward pull-left">
					<div class="a_a_reward">
						<div class="a_reward1">
							<div class="a_reward11 pull-left">
								<div class="reward_img"><img src="{{r.6}}/{{r.0}}" width="100%" class="img-circle"></div>
							</div>
							<div class="a_reward12 pull-left">
								<div class="reward_type pull-right"><b>#{{r.5}}</b></div>
								<div class="clearfix"></div>
								<div class="reward_name">
									{{r.2}}
								</div>
								<div class="reward_price"><b>￥{{r.3}}</b></div>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="a_reward2">
							<div class="topdirection"></div>
						</div>
						<div class="a_reward3">
							<div class="a_reward31">{{r.4}}</div>
							<div class="reward_in pull-right"><a href="{% url 'rewards:thereward' r.1 %}" target="_blank"><b>查看详情</b></a></div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
<!-- 一个悬赏 循环结束处 -->	{% endfor %}
				<div class="clearfix"></div>
			</div>

			<div>
					<ul class="pager">
					{% if rewards.has_previous %}
					  <li>
					  	<a href="javascript:void(0)" onclick="pageChange({{ rewards.previous_page_number }});">&larr;上一页</a>
					  </li>
					{% endif %}
					共 {{ rewards.number }} 页  第 {{ rewards.paginator.num_pages }} 页.
					{% if rewards.has_next %}
					  <li>
					  	<a href="javascript:void(0)" onclick="pageChange({{ rewards.next_page_number }});">下一页&rarr;</a>
					  </li>
					{% endif %}
						<form><input type="hidden" id="typeid" value="{{typeid}}"/></form>
					</ul>
			</div>				

			

		</div>
	</div>
</div>
	
	
	
	

</body>
</html>
